<template>
    <div class="form-item">
        <!-- 文本输入框 -->
        <a-input 
          v-if="formItemInfo.type === 'Input'" 
          placeholder="请输入" 
          v-model:value="currentValue" 
          v-on="formItemInfo.events"
        />

        <!-- 单选/多下拉框 -->
        <a-select 
        v-if="formItemInfo.type === 'Select'"
        placeholder="请选择"  
        :mode="formItemInfo.mode ? formItemInfo.mode : ''" 
        v-model:value="currentValue"
        :max-tag-count=2
        show-search
        :filter-option="formItemInfo.filterOption">
            <a-select-option 
            v-for="(optionItem, index) in formItemInfo.options" 
            :key="index" 
            c:label="optionItem.label"
            :value="optionItem.value">
                {{ optionItem.label }}
            </a-select-option>
        </a-select>

        <!-- 日期框 -->
        <a-date-picker 
        v-if="formItemInfo.type === 'Datebox'" 
        placeholder="请选择" 
        v-model:value="currentValue"/>

        <!-- 单选下拉树（可单选父级） -->
        <a-tree-select
            v-if="formItemInfo.type === 'SelectTreeOne'"
            placeholder="请选择"
            v-model:value="currentValue"
            show-search
            :filter-tree-node="formItemInfo.filterTreeNode"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear
            :multiple="Boolean(formItemInfo.mode)"
            tree-default-expand-all
            :tree-data="formItemInfo.treeData"
        >
        </a-tree-select>
        
        <!-- 多选下拉树（不可单选父级） -->
        <a-tree-select
            v-if="formItemInfo.type === 'SelectTreeMul'"
            placeholder="请选择"
            v-model:value="currentValue"
            :max-tag-count=2
            tree-checkable
            show-search
            :filter-tree-node="formItemInfo.filterTreeNode"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear
            :multiple="Boolean(formItemInfo.mode)"
            tree-default-expand-all
            :tree-data="formItemInfo.treeData"
        >
        </a-tree-select>


    </div>
</template>

<script>
export default {
    props: {
        formItemInfo: {
            type: Object,
            defalut: () => ({}),
        },
        itemValue: {
            type: String || Number || Object || Array,
        },
        value: {} //父组件v-model传过来的，通过proxy代理一下
    },
    computed: {
        currentValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('update:value', val);
            },
        },
    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
    :deep(.ant-picker) {
        width: 100%;
    }
</style>